<template>
	<view>
		<!-- #ifdef MP-WEIXIN,APP-PLUS -->
		<view style="height: 60rpx;"></view>
		<!-- #endif -->
		<view style="
				position: fixed;
				background: linear-gradient(180deg, #F74345, #F86769);
				width: 100%;
				padding: 10rpx;
				height:450rpx;
				color: #F0F0F0;
				">
			<view class="top">
				<text style="
						position: absolute;
						color: #FFFFFF;
						font-weight: bold;
						right:80rpx;
						top:120rpx;
						">设置</text>
				<text style="
						position: absolute;
						color: #FFFFFF;
						font-weight: bold;
						left:40rpx;
						top:100rpx;
						">我的</text>
				<br>
				<view>
					<u-avatar style="
								position: absolute;
								width: 100rpx;
								height: 100rpx;
								top: 150rpx;
								left: 50rpx;" :src="userInfo.headimageurl"></u-avatar>
					<view style="
								position: absolute;
								left: 170rpx;
								top: 150rpx;
							">
						<text>{{userInfo.username}}</text>
						<view style="height: 10rpx;"></view>
						<text style="
								background-color: rgba(0,0,0,.2);
								padding: 5rpx;
								font-size: 25rpx;
								padding: 10rpx;
								border-radius: 10rpx;
								">{{userInfo.mobile}}</text>
					</view>

				</view>

			</view>
		</view>
		
		

		<view style="
				position: fixed;
				background-color: #FFFFFF;
				width: 100%;
				height: 100%;
				top:600rpx;
			">
		</view>


		<view style="height: 260rpx;"></view>
		
			<u-grid :col="4" style="font-size: 25rpx;color: #FFFFFF;">
				<u-grid-item @click="toNavPage('../wodeshouhuodizhi/wodeshouhuodizhi')">
					<u-icon name="map" :size="46"></u-icon>
					<view style="height: 10rpx;"></view>
					<view class="grid-text">收货地址</view>
				</u-grid-item>
				<u-grid-item @click="toNavPage('../wodeshoucang/wodeshoucang')">
					<u-icon name="star" :size="46"></u-icon>
					<view style="height: 10rpx;"></view>
					<view class="grid-text">收藏</view>
				</u-grid-item>
				<u-grid-item @click="toNavPage('../liulanjilu/liulanjilu')">
					<u-icon name="file-text" :size="46"></u-icon>
					<view style="height: 10rpx;"></view>
					<view class="grid-text">浏览记录</view>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="red-packet" :size="46"></u-icon>
					<view style="height: 10rpx;"></view>
					<view class="grid-text">红包卡券</view>
				</u-grid-item>
			</u-grid>
			
		<view 
			:style="
				'background-color: #FFFFFF;'+
				'box-shadow: 0 0 5px rgba(118,118,118,.4);'+
				'width: 94%;'+
				'margin-left: '+wodedingdanLeft+'%;'+
				'transform: translateX(-50%);border-radius: 10rpx;color: gray;'
			">
			<view style="
					font-size: 30rpx;
					font-weight: bold;
					padding: 20rpx 0 0 20rpx;
					">我的订单</view>
				
				<text style="font-size: 30rpx;position: absolute;font-weight: lighter;right: 20rpx;top:20rpx"
				@click="toNavPage('../dingdan/quanbu/quanbu')"
				>查看所有订单 &gt;</text>

			<!-- 待获取后端接口时，改成v-for -->
			<u-grid :col="5" style="border-radius: 20rpx;font-size: 25rpx;">
				<u-grid-item
				 @click="toNavPage('../dingdan/daishoukuan/daishoukuan')"
				>
					<image
					 :style="'transform: rotate('+wodedingdanRotate+'deg)'"
					 class="grid-image" src="../../static/daifukuan.png"></image>
					<view class="grid-text">代收款</view>
				</u-grid-item>


				<u-grid-item @click="toNavPage(null)">
					<image
					 :style="'transform: rotate('+wodedingdanRotate+'deg)'"
					 class="grid-image" src="../../static/daishouhuo.png"></image>
					<view class="grid-text">待收货</view>
				</u-grid-item>


				<u-grid-item @click="toNavPage(null)">
					<image
					 :style="'transform: rotate('+wodedingdanRotate+'deg)'"
					 class="grid-image" src="../../static/daishiyong.png"></image>
					<view class="grid-text">待使用</view>
				</u-grid-item>


				<u-grid-item @click="toNavPage(null)">
					<image 
					:style="'transform: rotate('+wodedingdanRotate+'deg)'"
					class="grid-image" src="../../static/daipingjia.png"></image>
					<view class="grid-text">待评价</view>
				</u-grid-item>


				<u-grid-item @click="toNavPage(null)">
					<image 
					:style="'transform: rotate('+wodedingdanRotate+'deg)'"
					class="grid-image" src="../../static/tuikuan.png"></image>
					<view class="grid-text">退款/售后</view>
				</u-grid-item>

			</u-grid>
		</view>
		
		<view style="height: 30rpx;"></view>
		
		<view 
		@click="toNavPage('../wodeqianbao/wodeqianbao')"
		:style="
				'background-color: #FFFFFF;box-shadow: 0 0 5px rgba(118,118,118,.4);width: 94%;'+
				'margin-left: '+wodeqianbaoLeft+'%;'+
				'transform: translateX(-50%);'+
				'border-radius: 10rpx;'+
				'color: gray;'
			">
			<view style="
					font-size: 30rpx;
					font-weight: bold;
					padding: 20rpx 0 0 20rpx;
					">我的钱包</view>
				
				<text style="font-size: 30rpx;position: absolute;font-weight: lighter;right: 20rpx;top:20rpx">查看钱包 &gt;</text>
		
			<u-grid :col="3" style="border-radius: 20rpx;font-size: 25rpx;">
				<u-grid-item @click="toNavPage(null)">
					<view style="color:#000000;font-size: 50rpx;font-weight: bold;">15<text style="font-weight: lighter;font-size: 30rpx;">张</text></view>
					<view class="grid-text1">优惠券</view>
				</u-grid-item>
		
		
				<u-grid-item @click="toNavPage(null)">
					<view style="color:#000000;font-size: 50rpx;font-weight: bold;">313</view>
					<view class="grid-text1">积分</view>
				</u-grid-item>
		
		
				<u-grid-item @click="toNavPage(null)">
					<view style="color:#000000;font-size: 50rpx;font-weight: bold;">90</view>
					<view class="grid-text1">消费券</view>
				</u-grid-item>
	
			</u-grid>
		</view>


		<u-toast ref="uToast" />

	</view>
</template>

<script>
	
	var that;
	export default {
		data() {
			return {
				wodeqianbaoLeft:0,
				wodedingdanLeft:0,
				wodedingdanRotate:0,
				quitLoginBtnCss: {
					height: "400rpx",
					width: "400rpx",
					fontSize: "50rpx",
					fontWeight: "bold",
					borderRadius: "55%",
				},
				userInfo: {
					"uid": 2,
					"username": "微信用户",
					"mobile": "0000000000",
					"headimageurl": "",
					"address": "--",
					"integral": 0
				},
				deptInfo: {}
			}
		},
		mounted() {
			that = this;
		},
		onShow() {
			that = this;
			this.wodedingdanLeft=-50;
			this.wodeqianbaoLeft=150;
			var wodedingdanLeftInterB=false;
			var wodedingdanLeftInter=setInterval(()=>{
				if(this.wodedingdanLeft<=70&&(!wodedingdanLeftInterB)){
					this.wodedingdanLeft++;
					this.wodeqianbaoLeft--;
				}
				if(this.wodedingdanLeft>=70&&(!wodedingdanLeftInterB)){
					wodedingdanLeftInterB=true;
					this.goWodedingdanRotate();
				}
				if(wodedingdanLeftInterB){
					this.wodedingdanLeft--;
					this.wodeqianbaoLeft++;
					if(this.wodedingdanLeft<=50){
						clearInterval(wodedingdanLeftInter);
					}
				}
			},4);
		},
		methods: {
			goWodedingdanRotate() {
				that.wodedingdanRotate=0;
				var b=true;
				var index=0;
				var goRotate = setInterval(function(){
					
					if(that.wodedingdanRotate>=15){
						b=false;
					}
					
					
					if(that.wodedingdanRotate<=-15){
						b=true
						index+=1;
					}
					
					if(
						that.wodedingdanRotate>=0
						&&index==1
					){
						clearInterval(goRotate);
					}
					
					if(b){
						that.wodedingdanRotate++;
						return;
					}
					
					if(!b){
						that.wodedingdanRotate--;
						return;
					}
					
				},15);
			},
			getUserInfo() {
				// #ifdef MP-WEIXIN
				Util.request({
					url: Request.getUserInfo,
					data: {
						uid: Util.getUserId()
					},
					success(res) {
						if(Util.isSuccess(res.data)){
							that.userInfo=res.data.userInfo;
							return;
						}
					}
				});
				// #endif
				
			},
			toNavPage(path){
				if(path==null){
					that.$refs.uToast.show({
						title: "暂时未开启",
						type: 'warning',
						duration: '2300'
					});
					return;					
				}
				uni.navigateTo({
					url:path
				})
			}
		}
	}
</script>

<style lang="scss">
	.body-view {
		border-radius: 55%;
		box-shadow: 0 0 35rpx rgba(0, 0, 0, .3);
		position: fixed;
		width: 400rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.body-view:active {
		box-shadow: 0 0 20rpx gray;
	}

	.grid-image {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 15rpx;
	}
	
	.grid-text1{
		color: #000000;
	}
</style>
